<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>注册</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="">
        <script src="https://unpkg.com/vue/dist/vue.js"></script>
        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
        <style type="text/css">
            .register {
                width: 500px;
                height: 400px;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                align-items: center;
                margin: 0 auto;
            }
            form {
                background-color: antiquewhite;
                width: 500px;
                height: 300px;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                align-items: center;
                
            }
            .form-item {
                display: flex;
                width: 300px;
                height: 30px;
                justify-content: space-between;
            }
            .registerButton {
                flex-grow: 1;
                background-color: lightgreen;
            }
            .tokenButton {
                flex-grow: 1;
                background-color: lightgreen;
            }
        </style>
    </head>
    <body>
        <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
        <div id="app">
            <div class="register">
                <register-form></register-form>
                <!-- <button class="tokenButton" @click="createToken()">获取验证码</button> -->
            </div>
        </div>        
        
        <script type="text/javascript">

            const RegisterForm = {
                template: `
                <form @submit="submitForm">
                    <div class="form-item">
                        <label for="email">邮箱</label>
                        <input ref="email" name="email" id="email" type="text"/>
                    </div>
                    <div class="form-item">
                        <label for="password">密码</label>
                        <input ref="password" name="password" id="password" type="text"/>
                    </div>
                    <div class="form-item">
                        <label for="repeatPassword">确认密码</label>
                        <input ref="repeatPassword" name="repeatPassword" id="repeatPassword" type="text"/>
                    </div>
                    <div class="form-item">
                        <label for="code">验证码</label>
                        <input ref="code" name="code" id="code" type="text"/>
                    </div>
                    <div class="form-item">
                        <button id="token" class="tokenButton">获取验证码</button>
                    </div>        
                    <div class="form-item">
                        <button id="register" class="registerButton">注册</button>
                    </div>
                </form>
                `,
                data() {
                    return {
                        haha: 1
                    }
                },
                methods: {
                    submitForm(evt) {
                        var submitterId = evt.submitter.id;
                        evt.preventDefault();
                        if (submitterId == "token") {
                            var emailValue = this.$refs.email.value;
                            console.log(this.$refs.email.value);
                            var formData = new FormData();
                            formData.append('email', emailValue);
                            axios.post('http://localhost:80/api/code/create', formData)
                            .then(function(response){
                                var status = response.data;
                                console.log(status);
                                if (status) {
                                    alert("验证码发送成功，请登陆邮箱查看。");
                                } else {
                                    //window.location.href='welcome.html';
                                    alert("验证码获取失败，请重新获取。");
                                }
                            })
                            .catch(function(error){
                                console.log(error);
                            });
                        }

                        if (submitterId == "register") {
                            var emailValue = this.$refs.email.value;
                            var passwordValue = this.$refs.password.value;
                            var repeatPasswordValue = this.$refs.repeatPassword.value;
                            var codeValue = this.$refs.code.value;
                            console.log(this.$refs.email.value);
                            console.log(this.$refs.password.value);
                            console.log(this.$refs.repeatPassword.value);
                            console.log(this.$refs.code.value);
                            var formData = new FormData();
                            formData.append('email', emailValue);
                            formData.append('password', passwordValue);
                            formData.append('code', codeValue);
                            _this = this;
                            axios.post('http://localhost:80/api/user/register', formData)
                            .then(function(response){
                                var status = response.data.status;
                                var message = response.data.message;
                                console.log(status);
                                console.log(message);
                                if (status != 0) {
                                    alert(message);
                                } else {
                                    window.location.href='welcome.html';
                                    //alert(message);
                                }
                            })
                            .catch(function(error){
                                console.log(error);
                            });
                        }
                    }
                }
            }

            new Vue({
                el: '#app',
                components: {
                    'register-form': RegisterForm
                },
                methods: {
                }
            })

        </script>
    </body>
</html>